<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="cleartype" content="on">
  <meta http-equiv="x-dns-prefetch-control" content="on">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
  <link rel="dns-prefetch" href="https://webapi.amap.com">
  <link rel="dns-prefetch" href="https://restapi.amap.com">
  <link rel="dns-prefetch" href="https://vdata.amap.com">
  <link rel="dns-prefetch" href="https://vdata01.amap.com">
  <link rel="dns-prefetch" href="https://vdata02.amap.com">
  <link rel="dns-prefetch" href="https://vdata03.amap.com">
  <link rel="dns-prefetch" href="https://vdata04.amap.com">
  <link rel="dns-prefetch" href="https://sdf.amap.com">
  <link rel="dns-prefetch" href="https://wprd01.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd02.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd03.is.autonavi.com">
  <link rel="dns-prefetch" href="https://wprd04.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst01.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst02.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst03.is.autonavi.com">
  <link rel="dns-prefetch" href="https://webst04.is.autonavi.com">
  <title>an example for echarts-extension-amap</title>
  <!-- please replace {ak} with your ak & customize your plugins -->
  <!-- Plugin `AMap.CustomLayer` is required if you are using a version of library less than v1.9.0 -->
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key={ak}&plugin=AMap.Scale,AMap.ToolBar"></script>
  <!-- ECharts CDN -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
  <!-- echarts amap extension -->
  <!-- <script type="text/javascript" src="../dist/echarts-extension-amap.min.js"></script> -->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-extension-amap@1.10.1/dist/echarts-extension-amap.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    html, body, #echarts-amap {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>
<body>
  <div id="echarts-amap"></div>
  <!-- data comes from Baidu Map, just for example -->
  <script type="text/javascript">
    var linesDataURI = 'https://cdn.jsdelivr.net/gh/apache/echarts-examples/public/data/asset/data/lines-bus.json';

    // initialize echart
    var chart = echarts.init(document.getElementById('echarts-amap'));
    // fetch the lines data
    $.get(linesDataURI, function (data) {
      // convert
      var hStep = 300 / (data.length - 1);
      var busLines = [].concat.apply([], data.map(function (busLine, idx) {
        var prevPt;
        var points = [];
        for (var i = 0; i < busLine.length; i += 2) {
          var pt = [busLine[i], busLine[i + 1]];
          if (i > 0) {
            pt = [
              prevPt[0] + pt[0],
              prevPt[1] + pt[1]
            ];
          }
          prevPt = pt;

          points.push([pt[0] / 1e4, pt[1] / 1e4]);
        }
        return {
          coords: points,
          lineStyle: {
            color: echarts.color.modifyHSL('#5A94DF', Math.round(hStep * idx))
          }
        };
      }));
      chart.setOption({
        // amap component option
        amap: {
          // enable 3D mode
          // Note that it's suggested to enable 3D mode to improve echarts rendering.
          viewMode: '3D',
          // initial options of AMap
          // See https://lbs.amap.com/api/javascript-api/reference/map#MapOption for details
          // initial map center [lng, lat]
          center: [116.46, 39.92],
          // initial map zoom
          zoom: 10,
          // whether the map and echarts automatically handles browser window resize to update itself.
          resizeEnable: true,
          // customized map style, see https://lbs.amap.com/dev/mapstyle/index for details
          mapStyle: 'amap://styles/dark',
          // whether echarts layer should be rendered when the map is moving. Default is true.
          // if false, it will only be re-rendered after the map `moveend`.
          // It's better to set this option to false if data is large.
          renderOnMoving: false,
          // the zIndex of echarts layer for AMap, default value is 2000.
          // deprecated since v1.9.0, use `echartsLayerInteractive` instead.
          echartsLayerZIndex: 2000,
          // whether echarts layer is interactive. Default value is true
          // supported since v1.9.0
          echartsLayerInteractive: true,
          // whether to enable large mode. Default value is false
          // supported since v1.9.0
          largeMode: false
          // Note: Please DO NOT use the initial option `layers` to add Satellite/RoadNet/Other layers now.
          // There are some bugs about it, we can use `amap.add` instead.
          // Refer to the codes at the bottom.

          // More initial options...
        },
        series: [{
          type: 'lines',
          coordinateSystem: 'amap',
          polyline: true,
          data: busLines,
          silent: true,
          lineStyle: {
            opacity: 0.2,
            width: 1
          },
          progressiveThreshold: 500,
          progressive: 200
        }, {
          type: 'lines',
          coordinateSystem: 'amap',
          polyline: true,
          data: busLines,
          lineStyle: {
            width: 0
          },
          effect: {
            constantSpeed: 20,
            show: true,
            trailLength: 0.1,
            symbolSize: 1.5
          },
          zlevel: 1
        }]
      });
      // get AMap extension component
      var amapComponent = chart.getModel().getComponent('amap');
      // get the instance of AMap
      var amap = amapComponent.getAMap();
      // operations below are the same as amap
      amap.addControl(new AMap.Scale());
      amap.addControl(new AMap.ToolBar());
      // add layers
      // var satelliteLayer = new AMap.TileLayer.Satellite();
      // var roadNetLayer = new AMap.TileLayer.RoadNet();
      // amap.add([satelliteLayer, roadNetLayer]);
      // Add a marker to map
      // amap.add(new AMap.Marker({
      //   position: [115, 35]
      // }));
      // Make the overlay layer of AMap interactive
      // amapComponent.setEChartsLayerInteractive(false);
    });
  </script>
</body>
</html>
